<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/zTree/jquery.ztree.all.js"></script>
<script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>

<body style="height: 100%; margin: 0">
    <div class="layui-container">
        常规布局（以中型屏幕桌面为例）：
        <div class="layui-row">
            <div class="layui-col-md9">
                你的内容 9/12
            </div>
            <div class="layui-col-md3">
                你的内容 3/12
            </div>
        </div>
    </div>
    <div class=""="btn">
        <ul>
            <li onclick=editNode()><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-edit"></use>
                </svg></li>
            <li onclick=addNode()><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-add"></use>
                </svg></li>
            <li onclick=deleteNode()><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-subtract"></use>
                </svg></li>
        </ul>
    </div>
    <div class="add-box" style="padding:3px">
        <!--actually just use input1 to test function-->

        <div>
            <label>节点名称</label>
            <input tabindex="109" id="input1" type="text" autocomplete="off" />
        </div>


        <div><label>节点数值</label>
            <input tabindex="110" autocomplete="off" /></div>

    </div>
    <div id="container" style="height: 100%" onclick=bg_click()></div>
    <script src="echarts4.2.js"></script>
    <script src="option.js"></script>
    <script src="events-func.js"></script>
    <script src="./css/iconfont.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom)
        //preProcess()
        option = null
        var TimeFn = null                           //avoid click cover dblclick
        var preName = null

        var selectInfo = {
            state: false,
            index: null,
            name: null,
            category: null,
            x: null,
            y: null
        }
        myChart.on('click', selectEle.bind(this))
        myChart.on('dblclick', spreadAndcontract)    //dbl,not "db"

        digui(json);
        console.log(echarts_data)
        console.log(echarts_lins)

        // myChart.setOption(option = {
        //     tooltip: {
        //         trigger: 'item',
        //         triggerOn: 'mousemove'
        //     },
        //     series: [
        //         {
        //             zoom: 2,
        //             type: 'graph',
        //             layout: 'force',

        //             roam: true,
        //             category: categories,
        //             symbolSize: 34,
        //             animationDurationUpdate: 750,

        //             force: {
        //                 repulsion: 140,
        //                 layoutAnimation: false,//是否开启动画
        //                 edgeLength: 50//连接线长度
        //             },
        //         }
        //     ]
        // })

        // optionFromDB.series[0].data[10].fixed = true
        // optionFromDB.series[0].data[10].x = 100
        // optionFromDB.series[0].data[10].y = 100
        myChart.setOption(optionFromDB)

    </script>
    <style type="text/css">
        /*adjust list to side-to-side array*/
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: gray
        }

        li {
            float: left;
            padding: 11px;
        }

        li:hover {
            background-color: #484848;
        }
    </style>
</body>

</html>